<template>
  <div class="aside-menu">
    <el-menu :unique-opened="false" :default-active="defaultActive" @select="select">
      <template v-for="item in menuConfig">
        <el-submenu
          :index="item.key"
          v-if="item.childrens && item.childrens.length>0"
          :disabled="item.disabled"
          :key="item.key"
        >
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{item.title}}</span>
          </template>

          <!--二级菜单-->
          <template v-for="subItem in item.childrens">
            <el-submenu
              v-if="subItem.childrens && subItem.childrens.length > 0"
              :index="subItem.key"
              :key="subItem.key"
              :disabled="subItem.disabled"
            >
              <span slot="title">{{subItem.title}}</span>

              <!--三级菜单-->
              <template v-for="thirdChildren in subItem.childrens">
                <el-menu-item
                  v-if="thirdChildren.childrens && thirdChildren.childrens.length > 0"
                  :index="thirdChildren.key"
                  :key="thirdChildren.key"
                  :disabled="thirdChildren.disabled"
                  style="text-indent: 18px;"
                >
                  <span slot="title">{{thirdChildren.title}}</span>
                </el-menu-item>
              </template>
            </el-submenu>

            <el-menu-item v-else :index="subItem.key" :key="subItem.key" style="text-indent: 18px;">
              <span slot="title">{{subItem.title}}</span>
            </el-menu-item>
          </template>
        </el-submenu>

        <el-menu-item :key="item.key" :index="item.key" v-else :disabled="item.disabled">
          <i :class="item.icon"></i>
          <span slot="title">{{item.title}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import menuConfig from "@/config/menu.js";
export default {
  name: "asideMenu",

  data() {
    return {
      menuConfig: [],
      defaultActive: ''
    };
  },

  methods: {
    select(name) {
      this.$emit("seletcMenu", name);
    }
  },

  created() {
    //加载菜单数据
    this.menuConfig = menuConfig;
    if (menuConfig[0].childrens && menuConfig[0].childrens.length > 0) {
      this.$emit("seletcMenu", menuConfig[0].childrens[0].key);
      this.defaultActive = menuConfig[0].childrens[0].key;
    } else {
      this.$emit("seletcMenu", menuConfig[0].key);
       this.defaultActive = menuConfig[0].key;
    }
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
@{deep} .el-menu {
  border-right: none;
  .el-menu-item,
  .el-submenu__title {
    height: 40px;
    line-height: 40px;
  }
  .el-submenu .el-menu-item {
    padding: 0 20px !important;
  }
}
</style>